<template>
  <div class="map-box">
    <div class="info">
        <el-button type="primary" size="small" @click="drawFeature(1)">点</el-button>
        <el-button type="success" size="small" @click="drawFeature(2)">线</el-button>
        <el-button type="info" size="small" @click="drawFeature(3)">面</el-button>
    </div>
    <ol-map
      class="map"
      ref="map"
      zoom="6"
      :center="center"
      :isShowBaseMap="true"
      :isScaleLine="true"
    ></ol-map>
  </div>
</template>

<script>
import olMap from "../../../../components/map/ol-map";
import zDraw from "../../../../Utils/ol/zDraw"
import {addPoint} from "../../../../api/city"
export default {
  data() {
    return {
      center: [113.4, 34.56],
      info: "",
      ZMap:null,
      ZDraw:null
    };
  },
  components: {
    olMap
  },
  mounted() {
    this.ZMap = this.$refs.map.map;    
  },
  methods: {
    drawFeature(type){
        if(!this.ZDraw)
            this.ZDraw =  new zDraw(this.ZMap.map)
        this.ZDraw.draw({
            type:type,
            endDraw:res=>{
                addPoint({
                    name:"张三"+parseInt(Math.random()),
                    geom:res.wkt
                }).then(data=>{
                    console.log(data)
                })
            }
        })
    }
  }
};
</script>

<style>
.map-box {
  height: 100%;
  width: 100%;
}
.map {
  height: 100%;
  width: 100%;
}
.info {
  position: absolute;
  top: 70px;
  left: 245px;
  z-index: 100;
}
</style>